<template>
  <view class="interview-page">

    <view class="image-container">
			<up-image src="https://www.zxsl.zxmap.cn/zxch-app/2025/05/08/611666d5b3384592a1a3adce92556151.png"
				width="100%" mode="scaleToFill"></up-image>
		</view>
    
    <view class="main-content">
      <!-- 标签切换 -->
      <view class="tab-container">
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 0 }" 
          @click="switchTab(0)"
        >
          <text>简历列表</text>
        </view>
        <view 
          class="tab-item" 
          :class="{ active: activeTab === 1 }" 
          @click="switchTab(1)"
        >
          <text>历史面试</text>
        </view>
      </view>
      
      <!-- 简历列表 -->
      <view class="content-section" v-if="activeTab === 0">
        <view 
          v-for="resume in resumeList" 
          :key="resume.resumeId" 
          class="card-item resume-card"
          @click="startInterview(resume.resumeId)"
        >
          <view class="card-main">
            <view class="card-title">{{ resume.resumeName }}</view>
            <!-- <view class="card-subtitle">{{ resume.targetPosition }}</view> -->
          </view>
          <view class="card-footer">
            <view class="card-time">创建时间：{{ resume.createTime }}</view>
            <view class="card-action">
              <text class="action-text">开始面试</text>
              <text class="action-icon">›</text>
            </view>
          </view>
        </view>
        
        <view class="empty-state" v-if="resumeList.length === 0">
          <text>暂无简历数据</text>
        </view>
      </view>
      
      <!-- 历史面试 -->
      <view class="content-section" v-if="activeTab === 1">
        <view 
          v-for="item in historyList" 
          :key="item.interviewId" 
          class="card-item history-card"
          @click="viewHistory(item.interviewId)"
        >
          <view class="card-main">
            <view class="card-title">{{ item.jobPosition }}</view>
            <view class="card-score">
              <text class="score-label">面试得分：</text>
              <text class="score-value">{{ item.score ? item.score : 0 }} 分</text>
            </view>
          </view>
          <view class="card-footer">
            <view class="card-time" style="display: flex; flex-direction: column; align-items: center;">
              <text>开始时间：{{ item.startTime }}</text>
              <text>结束时间：{{ item.endTime }}</text>
            </view>
            <view class="card-action">
              <text class="action-text">查看详情</text>
              <text class="action-icon">›</text>
            </view>
          </view>
        </view>
        
        <view class="empty-state" v-if="historyList.length === 0">
          <text>暂无历史面试数据</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { 
  getResumeList, 
  getInterviewHistory 
} from '@/api/interview'
import { onLoad, onShow } from '@dcloudio/uni-app'

const resumeList = ref([])
const historyList = ref([])
const activeTab = ref(0) // 默认选中简历列表标签

// 切换标签
const switchTab = (index) => {
  activeTab.value = index
}

// 获取简历列表数据
const fetchResumeList = async () => {
  try {
    // 使用模拟API调用
    const res = await getResumeList({userId:uni.getStorageSync('loginInfo').user.userId})
    if (res.code === 200) {
      resumeList.value = res.rows
    }
  } catch (error) {
    uni.showToast({
      title: '获取简历列表失败',
      icon: 'none'
    })
  }
}

// 获取历史面试列表
const fetchHistoryList = async () => {
  try {
    // 使用模拟API调用
    const res = await getInterviewHistory({userId:uni.getStorageSync('loginInfo').user.userId,interviewStatus:2})
    console.log(res, 'res')
    if (res.code === 200) {
      historyList.value = res.rows
    }
  } catch (error) {
    console.log(error, 'error')
    uni.showToast({
      title: '获取历史面试失败',
      icon: 'none'
    })
  }
}

// 开始面试
const startInterview = (resumeId) => {
  uni.navigateTo({
    url: `/pages/interview/question?resumeId=${resumeId}`
  })
}

// 查看历史面试详情
const viewHistory = (interviewId) => {
  uni.navigateTo({
    url: `/pages/interview/historyDetail?interviewId=${interviewId}`
  })
}

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
}

onLoad(async (options) => {
  console.log(options, 'options')
  if(options.type == 'history'){
    activeTab.value = 1
  }else{
    activeTab.value = 0
  }
})

onMounted(() => {
  
})

onShow(() => {
  if(uni.getStorageSync('isLogined')){
    fetchResumeList()
    fetchHistoryList()
  }else{
    historyList.value = []
    resumeList.value = []
  }
})
</script>

<style lang="scss" scoped>
.interview-page {
  min-height: 100vh;
  background-color: #f5f7fb;
  
  .header {
    padding: 30rpx 30rpx 20rpx;
    background-color: #fff;
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .image-container {
		position: relative;
		z-index: 1;
	}
  
  .main-content {
    position: relative;
		margin-top: -30%;
		background-color: #f5f7fb;
		border-radius: 20px 20px 0 0;
		padding: 20px;
		z-index: 2;
		box-sizing: border-box;
  }
  
  .tab-container {
    display: flex;
    background-color: #fff;
    margin: 20rpx 0;
    border-radius: 10rpx;
    overflow: hidden;
    
    .tab-item {
      flex: 1;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 28rpx;
      position: relative;
      color: #666;
      
      &.active {
        color: #5ac725;
        font-weight: 500;
        
        &::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          background-color: #5ac725;
          border-radius: 2rpx;
        }
      }
    }
  }
  
  .content-section {
    padding-bottom: 30rpx;
  }
  
  .card-item {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    
    .card-main {
      margin-bottom: 20rpx;
    }
    
    .card-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .card-subtitle {
      font-size: 26rpx;
      color: #666;
    }
    
    .card-score {
      margin-top: 10rpx;
      
      .score-label {
        font-size: 26rpx;
        color: #666;
      }
      
      .score-value {
        font-size: 32rpx;
        color: #ff9500;
        font-weight: 500;
      }
    }
    
    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 16rpx;
      border-top: 1rpx solid #f0f0f0;
    }
    
    .card-time {
      font-size: 24rpx;
      color: #999;
    }
    
    .card-action {
      display: flex;
      align-items: center;
      
      .action-text {
        font-size: 26rpx;
        color: #5ac725;
      }
      
      .action-icon {
        font-size: 28rpx;
        color: #5ac725;
        margin-left: 4rpx;
      }
    }
  }
  
  .empty-state {
    padding: 100rpx 0;
    text-align: center;
    color: #999;
    font-size: 28rpx;
  }
}
</style>